<template>
	<view class="fixedBox" :style="{bottom: 80 - tabBarHeight + 'px'}">
		<view class="fixedItem" v-if="tabIsShow && gotopBtnIsShow" @click="goTop">
			<uni-icons color="#fff" size="36" type="up"></uni-icons>
		</view>
		<view class="fixedItem" v-if="delBtnIsShow" @click="deleteData">
			<uni-icons color="#fff" size="36" type="trash"></uni-icons>
			<view class="badgeBox">
				<uni-badge class="uni-badge-left-margin" :text="bagesCount == '0'? '':bagesCount" size="normal" />
			</view>
		</view>
		<view class="fixedItem" v-if="shaixuanBtnIsShow" @click="toggle">
			<uni-icons custom-prefix="iconfont" color="#fff" size="30" type="icon-shaixuan"></uni-icons>
		</view>
		<!-- 自定义项 -->
		<template v-for="(item,index) in customItem" :key="index">
			<!-- #ifdef MP -->
			<view  v-if="item.status" :class="{fixedItem: true,lastItem: index+1 == customItem.length}" @click="clickBar(item)">
				<uni-icons :custom-prefix="item.customPrefix" color="#fff" size="30" :type="item.type"></uni-icons>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view :class="{fixedItem: true,lastItem: index+1 == customItem.length}" @click="clickBar(item)">
				<uni-icons :custom-prefix="item.customPrefix" color="#fff" size="30" :type="item.type"></uni-icons>
			</view>
			<!-- #endif -->
		</template>
		
	</view>
	<!-- 普通弹窗 -->
	<uni-popup ref="popup" background-color="#fff" @change="change">
		<slot>
			<view class="popup-content" :class="{ 'popup-height': popupType === 'left' || popupType === 'right' }">
				内容
			</view>
		</slot>
	</uni-popup>
</template>

<script setup>
	/**
	 * bagesCount: 显示角标
	 * tabIsShowValue: 滚动多少距离显示回到顶部按钮
	 * gotopBtnIsShow: 是否显示回到顶部按钮
	 * delBtnIsShow: 是否显示删除按钮
	 * shaixuanBtnIsShow: 是否显示筛选按钮
	 * popupType: popup 弹出位置 top\right\bottom\left\center	默认top
	 * 
	 * customItem: 自定义的菜单项 Array
	 * 	callback 点击触发的函数
	 * 	customPrefix font-family
	 * 	type	font-family 类名 / uni-icon类名
	 * 	status	启用
	 * 
	 * 事件
	 * @popupChange 弹出层显示状态改变
	 * @deleteData	点击删除按钮
	 */
	import {
		onPageScroll,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	const props = defineProps({
		bagesCount: {
			type: String,
			default: '0'
		},
		tabIsShowValue: {
			type: Number,
			default: 500
		},
		delBtnIsShow: {
			type: Boolean,
			default: true
		},
		shaixuanBtnIsShow: {
			type: Boolean,
			default: false
		},
		gotopBtnIsShow: {
			type: Boolean,
			default: true
		},
		popupType: {
			type: String,
			default: 'top'
		},
		customItem:{
			type: Array,
			default: ()=>[]
		}
	})

	const clickBar = (item) => {
		item.callback()
	}
	
	const tabBarHeight = ref(0)
	onShow(()=>{
		const systemInfo = uni.getSystemInfoSync();
		tabBarHeight.value = systemInfo.screenHeight - systemInfo.safeArea.bottom;
	})
	
	const emit = defineEmits(['deleteData','popupChange'])
	const tabIsShow = ref(false)
	// 滚动到指定位置触发 控制回到顶部按钮显隐
	onPageScroll((e) => {
		tabIsShow.value = e.scrollTop > props.tabIsShowValue
	})
	const deleteData = () => {
		emit('deleteData')
	}
	// 回到顶部
	const goTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}



	const popup = ref(null)
	// 弹出层
	const toggle = () => {
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		popup.value.open(props.popupType)
	}
	const change = (e) => {
		emit('popupChange',e)
	}

		
	defineExpose({
		popup
	})
</script>

<style lang="scss" scoped>
	// 最后一个
	.lastItem {
		margin-bottom: 0!important;
	}

	.fixedBox {
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		z-index: 20;

		.fixedItem {
			background-color: $theme-bg-color2;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			box-sizing: border-box;
			padding-bottom: 5rpx;
			margin-bottom: 30rpx;
			position: relative;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
		}

		.badgeBox {
			position: absolute;
			top: -15rpx;
			right: -10rpx;

		}
	}
</style>